<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>战法页面</title>
    <link rel="stylesheet" href="{% static 'bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/generic.css' %}">
    <script src="{% static 'js/jquery-3.7.1.js' %}"></script>
    <script src="{% static 'js/chart.js' %}"></script>
    <script src="{% static 'bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
    <div class="card mb-4">
        <div class="card-header">预选战法</div>
    <!-- 大的div容器，用于显示selected_tactic_ls -->
        <div class="card-body" id="selected-tactic-container" style="border: 1px solid #ddd; padding: 10px; margin-bottom: 20px;"></div>
    </div>
    <div class="card mb-4">
        <div class="card-header">全部战法</div>
        <!-- MkData表格，包含分页和多选功能 -->
        <form class="card-body" id="tactic-form" method="post" action="{% url 'select_tactic' %}">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all"> 全选</th>
                        <th>名称</th>
                        <th>描述</th>
                        <th>类别</th>
                        <th>因子</th>
                        <th>类名</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in tactic_s %}
                        <tr>
                            <td><input type="checkbox" name="selected_names" value="{{ item.name }}"></td>
                            <td>{{ item.name }}</td>
                            <td>{{ item.describe }}</td>
                            <td>{{ item.tactic_type }}</td>
                            <td>{{ item.factor_name }}</td>
                            <td>{{ item.class_name }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>

            <!-- 分页导航 -->
            <div class="pagination">
                {% if tactic_s.has_previous %}
                    <a href="?page=1" style="margin: 5px;">第一页</a>
                    <a href="?page={{ tactic_s.previous_page_number }}" style="margin: 5px;">上一页</a>
                {% endif %}

                <span style="margin: 5px;">第{{ tactic_s.number }}页，共{{ tactic_s.paginator.num_pages }}页</span>

                {% if tactic_s.has_next %}
                    <a href="?page={{ tactic_s.next_page_number }}" style="margin: 5px;">下一页</a>
                    <a href="?page={{ tactic_s.paginator.num_pages }}" style="margin: 5px;">最后</a>
                {% endif %}
            </div>

            <!-- 确认按钮 -->
            <button type="submit" style="margin-left: 10px; border: 1px solid #ccc;border-radius: 5px;cursor: pointer;">确认</button>
        </form>
    </div>
    <script>
        // 绘制战法标签的代码
        function draw_card(show_data) {
            const ori_container = document.getElementById('selected-tactic-container');
            ori_container.innerHTML = '';
            // 渲染更新后的数据
            show_data.forEach(tactic => {
                const container = document.createElement('div');
                container.className = "tactic_card";
                container.style.display = 'grid'; // 设置容器为 Grid 布局
                container.style.gridTemplateColumns = '1fr 1fr auto'; // 定义三列：1fr, 1fr, auto
                container.style.gridAutoRows = 'auto'; // 行高自动调整
                container.style.gap = '10px'; // 设置网格间距

                // 将 tactic 按 "&&" 分割成三部分
                const parts = tactic.split(' | ');

                // 确保有三部分，分别提取
                const partB = parts[0] || ''; // B 部分
                const partA = parts[1] || ''; // A 部分
                const partC = parts[2] || ''; // C 部分

                // A 部分
                const aElement = document.createElement('div');
                aElement.className = "font-weight-bold";
                aElement.textContent = partA;
                aElement.style.gridColumn = '1'; // 第一列
                aElement.style.gridRow = '1'; // 第一行
                container.appendChild(aElement);

                // B 部分
                const bElement = document.createElement('div');
                bElement.textContent = partB;
                bElement.style.gridColumn = '2'; // 第二列
                bElement.style.gridRow = '1'; // 第一行
                container.appendChild(bElement);

                // C 部分
                const cElement = document.createElement('div');
                cElement.className = "text-muted";
                cElement.textContent = partC.length > 40 ? partC.slice(0, 40) + '...' : partC; // 超过40字符截断
                cElement.style.gridColumn = '1 / span 2'; // 跨两列
                cElement.style.gridRow = '2'; // 第二行
                container.appendChild(cElement);

                // 删除按钮
                const deleteButton = document.createElement('button');
                deleteButton.className = 'delete-tactic';
                deleteButton.textContent = 'x';
                deleteButton.dataset.name = partA;
                deleteButton.style.gridColumn = '3'; // 第三列
                deleteButton.style.gridRow = '1 / span 2'; // 跨两行
                deleteButton.style.alignSelf = 'center'; // 垂直居中
                deleteButton.style.justifySelf = 'center'; // 水平居中
                container.appendChild(deleteButton);

                // 加入ori_container
                ori_container.appendChild(container);
            });
        }


        // 页面加载时运行的 JavaScript 代码
        window.onload = function () {
            // 例如更新已选数据列表
            const selected_tactic_ls = {{ selected_tactic_ls|safe }};
            draw_card(selected_tactic_ls);
        };

        // 全选/取消全选功能
        $('#select-all').on('change', function() {
            $('input[name="selected_names"]').prop('checked', this.checked);
        });


        // 提交表单通过AJAX请求
        $('#tactic-form').on('submit', function(event) {
            event.preventDefault();  // 阻止默认的表单提交行为

            // 获取表单数据
            const formData = new FormData(this);

            // 发送AJAX请求
            fetch("{% url 'select_tactic' %}", {
                method: 'POST',
                body: formData,
                headers: {}
            })
            .then(response => response.json())  // 假设后端返回JSON数据
            .then(data => {
                // 处理返回的数据，更新页面内容，返回的数据为variable
                if ("model_data" in data) {
                    // 例如更新已选数据列表
                    draw_card(data.model_data.lab_var_part2_3.selected_tactics_ls);
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });

        // 删除按钮点击事件
        $('#selected-tactic-container').on('click', '.delete-tactic', function() {
            const tacticName = $(this).data('name');  // 获取被删除项的name
            // 发送AJAX请求到后端进行删除
            fetch("{% url 'delete_tactic' %}", {
                method: 'POST',
                body: JSON.stringify({ name: tacticName }), // 发送name作为删除标识
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                // 处理返回的数据，更新页面内容，返回的数据为variable
                if ("model_data" in data) {
                    // 例如更新已选数据列表
                    // 渲染更新后的数据
                    draw_card(data.model_data.lab_var_part2_3.selected_tactics_ls);
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    </script>
</body>
</html>






